<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../resources/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../resources/font-awesome/css/loginFont.css"/>
    <script src="../../resources/js/jquery-2.1.1.js"></script>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .loginBac{
            height: 100%;
            width: 100%;
            background: url("../../resources/img/loginBac.jpg");
            background-size: cover;
            position: relative;
        }
        .loginText{
            width: 20%;
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translateX(-273px) translateY(-133px);
        }
        .loginForm{
            position: relative;
            width: 100%;
        }
        .loginBox{
            background: #d8ebf2;
            position: absolute;
            width: 400px;
            padding: 20px 45px;
            padding-bottom: 20px;
            left: 60%;
            top: 18%;
        }
        .logIcon{
            background: white;
            font-size: 16px;
            padding: 8px 0;
            min-width: 40px;
            text-align: center;
        }
        .logIcon+input{
            height: 40px;
        }
        .checkbox{
            display: inline-block;
            margin-top: 0px;
            margin-left: 23px;
        }
        .otChoise{
            position: relative;
            left: 0%;
            top: 65%;
        }
        .btn-block{
            margin-top: 15px;
        }
        .text-left span{
            font-weight: 500;
            color: #787481;
        }
        a:hover,a{
            color: #2e82ff;
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .otChoise{
            color: #787481;
            margin-top: 20px;
        }
        .choise ul{
            float: left;
            padding: 0;
            margin-top: 10px;
        }
        .choise ul li{
            float: left;
            margin-left: 20px;
        }
        .choise ul li a{
            display: inline-block;
            width: 25px;
            height: 25px;
            background: url("../../resources/img/icon.png") no-repeat;
        }
        .choise ul li:nth-child(1){
            margin-left: 0px;
        }
        .choise ul li:nth-child(2) a{
            background-position: -175px 0;
        }
        .choise ul li:nth-child(3) a{
            background-position: -25px 0;
        }
        .loginTit{
            font-family: "黑体";
            font-weight: 700;
            color: #000;
            font-size: 21px;
            margin-bottom: 25px;
        }
        .quick,.static{
            position: absolute;
            left: 85%;
            font-size: 50px;
            top: -2%;
            color: #0685d4;
            cursor: pointer;
        }
        .iconfont{
            color: #0685d4;
        }
        .poptip{
            position: absolute;
            top: 2%;
            height: 30px;
            left: 50%;
        }
        .qrcode-img img{
            width: 140px;
            height: 140px;
        }
        .qrcode-login{
            display: none;
        }
        h4{
            font-size: 16px;
            display: inline-block;
        }
        .loginTit h5:last-child{
            font-size: 14px;
            color: #ff846d;
        }
        .login-error{
            position: absolute;
            color: red;
            top: 45px;
            font-size: 14px;
            /* position: relative; */
            background: #ffebeb;
            color: #e4393c;
            border: 1px solid #faccc6;
            padding: 3px 101px 3px 40px;
            line-height: 18px;
            min-height: 18px;
        }
        }
    </style>
</head>
<body>
<div class="loginBac">
    <img src="../../resources/img/loginText.png" class="loginText"/>
    <div class="loginBox">
        <!-- 账号登录-->
       <div class="acc-login">
           <div class="loginTit">
               <h4>密码登录</h4>
           </div>
           <!--<div class="rightTap">-->
               <!--<div class="poptip">-->
                   <!--<div class="poptip-arrow">-->
                       <!--<em></em>-->
                       <!--<span></span>-->
                   <!--</div>-->
                   <!--<div class="poptip-content">-->
                       <!--<i class="iconfont"></i>扫码登录更方便-->
                   <!--</div>-->
               <!--</div>-->
               <!--<i class="iconfont quick" id="codeQuick"></i>-->
           <!--</div>-->
           <form class="loginForm" action="index.html">
               <div class="form-group">
                   <div class="input-group">
                       <span class="input-group-addon logIcon"><i class="fa fa-user"></i></span><input class="form-control" placeholder="用户名" type="text">
                   </div>
               </div>
               <div class="form-group">
                   <div class="input-group">
                       <span class="input-group-addon logIcon"><i class="fa fa-lock"></i></span><input class="form-control" placeholder="密码" type="password">
                   </div>
               </div>
               <a class="pull-right fogetpsw" href="">忘记密码?</a>
               <div class="text-left">
                   <label class="checkbox" for="checkbox"><input id="checkbox" type="checkbox"><span>自动登录</span></label>
               </div>
               <input class="btn btn-lg btn-primary btn-block" type="submit" value="登录">
           </form>
           <!--<div class="otChoise">-->
               <!--<div class="">其他方式登录</div>-->
               <!--<div class="choise">-->
                   <!--<ul>-->
                       <!--<li><a href="#" title="QQ"></a></li>-->
                       <!--<li><a href="#" title="微信"></a></li>-->
                       <!--<li><a href="#" title="微博"></a></li>-->
                   <!--</ul>-->
               <!--</div>-->
           <!--</div>-->
       </div>
        <!-- 扫码登录-->
        <!--<div class="qrcode-login" >-->
            <!--<div class="loginTit">-->
                <!--<h4>扫码登录</h4>-->
            <!--</div>-->
            <!--<div class="rightTap">-->
                <!--<div class="poptip">-->
                    <!--<div class="poptip-arrow">-->
                        <!--<em></em>-->
                        <!--<span></span>-->
                    <!--</div>-->
                    <!--<div class="poptip-content">-->
                        <!--<i class="iconfont"></i>密码登录在这里-->
                    <!--</div>-->
                <!--</div>-->
                <!--<i class="iconfont static"></i>-->
            <!--</div>-->
            <!--<div class="qrcode-mod">-->
                <!--<div class="qrcode-main">-->
                    <!--<div class="qrcode-img" id="J_QRCodeImg" style="opacity: 1; left: 80px;"><img src="../../img/qrcode.png"></div>-->
                <!--</div>-->
                <!--<div class="qrcode-desc" data-spm="25847036">-->
                    <!--<i class="iconfont"></i>-->
                    <!--<br/>-->
                    <!--<p><font class="ft-gray">打开 </font>微信-->
                        <!--<span class="ft-gray">扫一扫登录</span></p>-->

                <!--</div>-->

            <!--</div>-->
            <!--<div class="qrcode-msg">-->
                <!--<div class="msg-ok">-->
                    <!--<div class="msg-icon">-->
                        <!--<i class="iconfont icon-ok"></i>-->
                        <!--<i class="iconfont icon-phone"></i>-->
                    <!--</div>-->
                    <!--<h6>扫描成功！</h6>-->
                    <!--<p>请在手机上确认登录</p>-->
                    <!--<div class="link"><a href="#" class="light-link J_QRCodeRefresh">返回二维码登录</a></div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>
<script>
    $('#codeQuick').click(function(){
        $('.acc-login').hide().siblings().show()
    })
    $('.static').click(function(){
        $('.qrcode-login').hide().siblings().show()
    })
    $('.btn-block').on('click',function(){
       if($('.logIcon+input').val()==false){
           $('.loginTit').after('<div class="pull-left login-error" style="position: absolute;color:red;top: 45px;font-size: 16px"><i class="fa fa-minus-circle"></i> 账号或密码不能为空!</div>')
           return false;
       }
    })
</script>
</body>
</html>